<!-- 组件说明 -->
<template>
  <div class="wrap">
    <div class="box">
      <ul id="box1">
        <li style="background:url(../assets/img/main/bjbank.png) no-repeat"></li>
        <li style="background:url(../assets/img/main/bjbank.png) no-repeat"></li>
        <li style="background:url(../assets/img/main/bjbank.png) no-repeat"></li>
        <li style="background:url(../assets/img/main/bjbank.png) no-repeat"></li>
        <li style="background:url(../assets/img/main/bjbank.png) no-repeat"></li>
      </ul>
      <ul id="box2"></ul>
    </div>
  </div>

</template>

<script>
  var timer='';//设置一个定时器
  var $box1=$('#box1').children().clone(true);/*克隆box1的子元素*/
  $('#box2').append($box1);//将复制的元素插入到#box2中
  var $left=parseInt($('.box').css('left'));//获取.box的left值
  var scroll=function(){
    $left-=2;//设置滚动速度为2
    $('.box').css('left',$left+'px');//left赋值
    if($left<-1500){//当box值小于-1500px时，重置.box left值为0；
      $('.box').css('left','0');
      $left=0;
    }
    timer =setTimeout(scroll,30);
  }
  setTimeout(scroll,100);
  $('.wrap').hover(function(){
    clearTimeout(timer);
  },function(){
    setTimeout(scroll,100);
  });

    //import x from ''
    export default {
        components: {

        },
        data () {
            return {
                //初始化滑动屏幕的当前索引
                key:0,
                //记录上一屏，这一屏滚动将要消失
                prev:0,
            };
        },
        computed: {

        },
        methods: {
            //初始化整屏幕滑动的组件
            initAllScroll(){
                let vue = this;
                vue.out();
                //滑轮滚动事件
                $(document).mousewheel(function(event,delta){
                    //如果没有处于执行动画状态，方可执行
                    if(!$('.wrapBox').is(':animated')){
                        //两个参数  delta  返回当前往上滚动（1）   往下滚动（-1）
                        /*
                        0   -1    1
                        1   -1    2
                        2   -1    3
                        */
                        vue.key = parseInt(vue.key) - parseInt(delta);
                        if(vue.key < 0){
                            vue.key = 0;
                        }else if(vue.key > 5){
                            vue.key = 5;
                        }
                        $('.wrapBox').stop(true).animate({top:-vue.key*100 + '%'},1000);
                        $('.nav li').eq(vue.key).addClass('current').siblings().removeClass('current');
                    }
                    vue.out();
                    vue.prev = vue.key;
                });
                var arr = ['首页','营销手段','服务优势','特色功能','技术特点','申请加入']
                $('.nav li').bind({
                    mouseenter:function(){
                        $(this).append('<span>'+arr[$(this).index()]+'</span>');
                    },
                    mouseleave:function(){
                        $(this).find('span').remove();
                    },
                    click:function(){
                        //获取当前索引
                        this.key = $(this).index();
                        $('.wrapBox').stop(true).animate({top:-this.key*100 + '%'},1000);
                        $(this).addClass('current').siblings().removeClass('current');
                        vue.out();
                        this.prev = this.key;
                    }
                });
                //通过按钮点击第一屏动画显示
                $('button:first').click(function(){
                    $('.box').removeClass('comeout');
                });
            },
            out(){
                let vue = this;
                $('.box').eq(vue.prev).addClass('comeout');
                $('.box').eq(vue.key).removeClass('comeout');
            }
        },
        mounted() {
            this.initAllScroll();
        },
        //生命周期 - 创建之前
        beforeCreate() {},
        //生命周期 - 挂载之前
        beforeMount() {},
        //生命周期 - 更新之前
        beforeUpdate() {},
        //生命周期 - 更新之后
        updated() {},
        //生命周期 - 销毁之前
        beforeDestroy() {},
        //生命周期 - 销毁完成
        destroyed() {},
        //如果页面有keep-alive缓存功能，这个函数会触发
        activated() {},
    }
</script>

<style scoped>
  *{margin: 0;padding: 0}
  ul{list-style: none}
  .box ul li{display: block;float: left;width: 300px;height: 300px;margin-right: -1px;background-size: cover;background-position: center center;}
  .box{height: 300px;width:3010px;}
  #box1,#box2{float: left}
  .wrap{position: relative;width: 800px;margin: auto;height: 300px;overflow: hidden}
  .box{position: absolute;left: 0;}




html,body,h1,h2,h3,h4,h5,h6,div,dl,dt,dd,ul,ol,li,p,blockquote,pre,hr,figure,table,caption,th,td,form,fieldset,legend,input,button,textarea,menu{margin:0;padding:0;}
header,footer,section,article,aside,nav,hgroup,address,figure,figcaption,menu,details{display:block;}
table{border-collapse:collapse;border-spacing:0;}
caption,th{text-align:left;font-weight:normal;}
html,body,fieldset,img,iframe,abbr{border:0;}
i,cite,em,var,address,dfn{font-style:normal;}
[hidefocus],summary{outline:0;}
li{list-style:none;}
h1,h2,h3,h4,h5,h6,small{font-size:100%;}
sup,sub{font-size:83%;}
pre,code,kbd,samp{font-family:inherit;}
q:before,q:after{content:none;}
textarea{overflow:auto;resize:none;}
label,summary{cursor:default;}
a,button{cursor:pointer;}
h1,h2,h3,h4,h5,h6,em,strong,b{font-weight:bold;}
del,ins,u,s,a,a:hover{text-decoration:none;}
body,textarea,input,button,select,keygen,legend{font:12px/1.14 arial,\5b8b\4f53;color:#333;outline:0;}
body{background:#fff;}
a,a:hover{color:#333;}
body,html{
	width:100%;
	height:100%;
	overflow-y:hidden;
}
.wrapBox{
	width:100%;
	height:100%;
	position:fixed;
}
.box{
	width:100%;
	height:100%;
	overflow:hidden;
}
.page1{
	background:url(../assets/img/scroll/b1_bg.jpg) no-repeat center top;
}
.w960{
	width:960px;
	height:100%;
	margin:0 auto;
	position:relative;
}
.page1_01{
	position:absolute;
	top:120px;
	left:-120px;
	z-index:10;
	transition:all 2s linear 0s;
}
.page1_02{
	position:absolute;
	top:250px;
	right:30px;
	z-index:9;
	transition:all 2s linear 0s;
}

.page1_02_btn{
	margin-top:15px;
	animation:play 1s linear 0s infinite alternate;
	-webkit-animation:play 1s linear 0s infinite alternate;
}
@keyframes play{
	from{
		opacity:0.3;
	}
	to{
		opacity:1;
	}
}
@-webkit-keyframes play{
	from{
		opacity:0.3;
	}
	to{
		opacity:1;
	}
}
.page1_03{
	position:absolute;
	left:50%;
	margin-left:-720px;
	bottom:-130px;
}
.page1_04{
	position:absolute;
	right:-50px;
	top:460px;
}
.box.comeout .page1_01{
	left:-220px;
	opacity:0;
}
.box.comeout .page1_02{
	top:350px;
	opacity:0;
}
.page2{
	background:url(../assets/img/scroll/b3_bg.jpg) no-repeat center top;
}
.page2_01{
	position:absolute;
	left:50%;
	top:50%;
	transform:translate(-50%,-50%) rotate(0deg);
	transition:all 2s ease 0s;
}
.box.comeout .page2_01{
	transform:translate(-50%,-50%) rotate(-360deg);
	opacity:0;
}
.page3{
	background:yellowgreen;
}
.page4{
	background:orange;
}
.page5{
	background:purple;
}
.page6{
	background:gold;
}
.fixedNav{
	height:60px;
	width:100%;
	background:url(../assets/img/scroll/sprite.png) repeat-x;
	position:fixed;
	z-index:10;
}
.nav{
	width:22px;
	height:150px;
	padding-top:14px;
	background:rgba(255,255,255,0.4);
	position:fixed;
	top:50%;
	margin-top:-82px;
	right:20px;
	border:1px solid rgba(255,255,255,0.6);
	border-radius:10px;
}
.nav li{
	width:16px;
	height:16px;
	background:url(../assets/img/scroll/sprite.png) no-repeat -40px -130px;
	margin:5px auto;
	cursor:pointer;
	position:relative;
}
.nav li.current{
	background-position:-40px -110px;
}
</style>
<style>
.nav li span{
	width:76px;
	height:19px;
	position:absolute;
	background:url(../assets/img/scroll/sprite.png) no-repeat 0 -80px;
	left:-80px;
	top:0;
	text-align:center;
	line-height:19px;
	color:#fff;
    font-size: 14px;
}
</style>
